<template>
  <div class="searchBox">
    <!-- 搜索框 -->
    <!-- <el-input
      placeholder="企业名称"
      v-model="input3"
      class="input-with-select"
    > -->
    <el-autocomplete
      prefix-icon="el-icon-search"
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      value-key="cname"
      placeholder="企业名称"
      @select="handleSelect"
    >
      <!-- <el-button slot="append" icon="el-icon-search" @click="handleSelect"
        >搜索</el-button
      > -->
    </el-autocomplete>
  </div>
</template>

<script>
import { searchCompanyDetailListApi } from '@/api/company'
export default {
  name: 'SearchBox',
  data () {
    return {
      companyDetailList: [],
      state: '',
      timeout: null
    }
  },
  created () {},
  async mounted () {
    this.companyDetailList = await this.loadAll()
  },
  methods: {
    async loadAll () {
      const {
        data: { data }
      } = await searchCompanyDetailListApi()
      return data.data
    },
    // 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它
    querySearchAsync (queryString, cb) {
      const companyDetailList = this.companyDetailList
      const results = queryString
        ? companyDetailList.filter(this.createStateFilter(queryString))
        : companyDetailList
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 100 * Math.random())
    },
    createStateFilter (queryString) {
      return state => {
        return (
          state.cname.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        )
      }
    },
    handleSelect (val) {
      this.$emit('detailSearch', val.cname)
      // 清空搜索框
      this.state = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.searchBox {
  ::v-deep .el-autocomplete {
    padding-left: 10px;
    width: 800px;
    // border: 2px solid #545c64;
    // border-radius: 25px;
    .el-input__inner {
      font-size: 18px;
      border-radius: 25px !important;
      padding-left: 50px;
    }
    .el-icon-search {
      font-size: 20px;
      margin-left: 10px;
    }
  }
  ::v-deep .el-footer {
    height: 0;
  }
}
</style>
